<template>
	<view>
		<view>
			<view class='header'>
				<u-avatar :size="200" :src="userInfo.avatarUrl?userInfo.avatarUrl:pic"></u-avatar>
			</view>
			<view class='content'>
				<view>您好，{{userInfo.nickName?userInfo.nickName:'游客'}}</view>
				<text>为了您的账户安全，请绑定手机号</text>
			</view>
			<button class='bottom' type='primary' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				微信手机号一键绑定
			</button>
		</view>
	</view>
</template>


<script>
	import {
		getOpenid,
		getPhoneNumber
	} from '../../api/wxlogin.js'

	export default {
		data() {
			return {
				pic: "/static/profile.png",
				userInfo: {},
				userDetail: {},
				queryParams: {
					code: '',
					encryptedData: '',
					ivdata: '',
					openid: '',
					session_key: '',
				}
			}
		},
		onLoad(e) {
			this.userInfo = JSON.parse(e.userInfo)
			uni.login({
				success: (res) => {
					this.queryParams.code = res.code
					getOpenid(this.queryParams).then(res => {
						this.queryParams.session_key = res.data.session_key
						this.queryParams.openid = res.data.openid
					})
				}
			})
		},
		methods: {
			getPhoneNumber(e) {
				this.queryParams.encryptedData = e.detail.encryptedData
				this.queryParams.ivdata = e.detail.iv
				getPhoneNumber(this.queryParams).then(res => {
					if (res.data) {
						uni.setStorageSync('token', res.data)
						uni.setStorageSync('userInfo', this.userInfo);
						uni.switchTab({
							url: '../center/index'
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '当前用户未关联手机号,请关联后重试',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: '../center/index'
									});
								}
							}
						});
					}
				})

			}
		}
	};
</script>

<style>
	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
		background-color: #07c160;
	}
</style>
